<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">
        <hr>
        <one></one>
        <hr>
        <two></two>
    </div>

    <template id="one">
        one----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: rebeccapurple;">哈哈哈哈哈哈哈哈哈</div>
    </template>
    <template id="two">
        two----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: red;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
</body>
<script>

    //基础的mixin信息
    const baseMixin = {
        name: 'baseMixin',
        data() {
            return {
                name: 'base name',
                age: 100
            }
        },
        mounted() {
            console.log('baseMixin -- mounted -- 组件挂载完毕')
        }
    }

    const oneConfig = {
        template: '#one',
        mounted() {
            console.log('oneConfig -- mounted -- 组件挂载完毕')
        },
        // 在 mixins 属性中传入需要混入的对象数组，所有属性都会被合并在一起而非覆盖，mixins 会在冲突时保留组件内的属性
        // 声明周期的钩子函数会被存入数组进行逐一调用
        mixins: [baseMixin]
        // 当每个组件都有共同的某些选项时，可以在 main.js 文件的 vue 实例对象中 app.mixin 方法进行注册
        // mixin混入的缺点：1. 无法像插槽一样通过传参改变逻辑，缺乏灵活性 2. 多个 mixin 混入同一个组件中时容易发生命名冲突

        // option API 还提供了另一种逻辑复用方式：extends 继承，这种方式可以使组件继承另一个组件的代码逻辑实现复用
        // DemoB 组件将复用此组件
    }
    const twoConfig = {
        template: '#two',
        extends: oneConfig,
        data() {
            return {
                name: 'two name',
                age: 22
            }
        },
        mounted() {
            console.log('twoConfig -- mounted -- 组件挂载完毕')
        },
    }

    const HelloVueApp = {
        data() {
            return {
            }
        },
        components:{
            one:oneConfig,
            two:twoConfig
        }
    }

    const app = Vue.createApp(HelloVueApp);
    //全局混入
    app.mixin({
        mounted() {
            console.log('全局mixin：组件加载完毕')
        }
    })
    const m = app.mount('#app');
</script>

</html>